<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lijch
  Date: 2021/4/7
  Time: 9:18 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>发布信息</title>
    <link href="${pageContext.request.contextPath}/css/boot3/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet" type="text/css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        body{
            background-image: url("/images/login_re_back.jpeg");
            background-size: cover;
        }
        .col-md-12,.col-md-5{
            margin-bottom: 2%;
        }
        #upBox{
            text-align: center;
            width:500px;
            padding: 20px;
            border: 1px solid #666;
            margin: auto;
            position: relative;
            border-radius: 10px;
        }
        #inputBox{
            width: 100%;
            height: 40px;
            border: 1px solid cornflowerblue;
            color: cornflowerblue;
            border-radius: 20px;
            position: relative;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
            font-size: 16px;
        }
        #inputBox input{
            width: 114%;
            height: 40px;
            opacity: 0;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: -14%;

        }
        #imgBox{
            text-align: left;
        }
        .imgContainer{
            display: inline-block;
            width: 32%;
            height: 150px;
            margin-left: 1%;
            border: 1px solid #666666;
            position: relative;
            margin-top: 30px;
            box-sizing: border-box;
        }
        .imgContainer img{
            width: 100%;
            height: 150px;
            cursor: pointer;
        }
        .imgContainer p{
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 30px;
            background: black;
            text-align: center;
            line-height: 30px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            display: none;
        }
        .imgContainer:hover p{
            display: block;
        }
        #btn{
            display: inline-block;
            text-align: center;
            line-height: 30px;
            outline: none;
            width: 100px;
            height: 30px;
            background-color: #ee4a02;
            border: 1px solid cornflowerblue;
            color: white;
            cursor: pointer;
            margin-top: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="header_top" style="background-color: #66afe9">
    <div class="container">
        <div class="header_top-box">
            <div class="cssmenu" style="float: left">
                <ul>
                    <li><a href="#">欢迎 ${sessionScope.user.getUName()} 用户</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="cssmenu">
                <ul>
                    <c:set var="u" value="${sessionScope.user}"/>
                    <li><a href="/user/person/index">个人中心</a></li>
                    <li><a href="/user/shop/car/${u.getId()}/index">购物车</a></li>
                    <li><a href="/login/out">退出登录</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="header_bottom">
    <div class="container">
        <div class="header_bottom-box">
            <div class="header_bottom_left">
                <div class="logo">
                    <a href="/index"><img src="/images/e.png" alt=""/></a>
                </div>
                <ul class="clock">
                    <i class="clock_icon"> </i>
                    <li class="clock_desc" id="time"></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="header_bottom_right">
                <div class="search">
                    <h2>发布信息</h2>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<hr>
<div style="width: 60%;margin-left: 20%;text-align: center;">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <label class="input-group-addon">标题</label>
                <input type="text" class="form-control" id="title">
            </div>
        </div>
        <div class="col-md-5">
            <div class="input-group">
                <label class="input-group-addon">书籍类型</label>
                <select class="form-control" id="book_type">
                    <option value="1">计算机</option>
                    <option value="2">数学</option>
                    <option value="3">课外</option>
                </select>
            </div>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-5">
            <div class="input-group">
                <label class="input-group-addon">信息类型</label>
                <select class="form-control" id="info_type">
                    <option value="1">出售</option>
                    <option value="0">收购</option>
                </select>
            </div>
        </div>
        <div class="col-md-5">
            <div class="input-group">
                <label class="input-group-addon">价格</label>
                <input type="text" class="form-control" id="price">
            </div>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-5">
            <div class="input-group">
                <label class="input-group-addon">数量</label>
                <input type="text" class="form-control" id="num">
            </div>
        </div>
        <div class="col-md-12">
            <textarea class="form-control" id="intro" rows="4" placeholder="添加描述..."></textarea>

        </div>
        <div class="col-md-12">
            <div style="width: 100%;position: relative;">
                <form id="upBox">
                    <div id="inputBox" style="background-color: #ffffff">
                        <input type="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG"/>
                        点击选择图片
                    </div>
                    <div id="imgBox"></div>
                    <a id="btn">发布</a>
                </form>
            </div>
        </div>
        <div class="col-md-12">
        </div>
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/uploadImg.js"></script>
<script type="text/javascript">
    imgUpload({
        inputId:'file',
        imgBox:'imgBox',
        buttonId:'btn',
        upUrl:'/ubook/image/up',
        data:'file',
        num:"5"
    });
</script>
</body>
</html>
